<template>
	<div class="dorm">
		<van-nav-bar
		  fixed
		  border
		  title="账单详情"
		  left-arrow
		  @click-left="goBack"
		/>
		<div class="bill_title">
			<!-- <p class="ThreeTitle" v-if="billArr.park">
				{{billArr.park.pk_name}}
			</p> -->
			<p class="ThreeTitle" v-if="billArr.data_type == 'bill' ">租赁账单</p>
			<p class="ThreeTitle" v-if="billArr.data_type == 'overdue' ">滞纳金账单</p>
			<p class="ThreeTitle" v-if="billArr.data_type == 'margin' ">保证金账单</p>
			<!-- <p :class="billArr.cleaning_status>1?'Paid':'money'">￥{{billArr.cleaning_status>1?billArr.receivable_fee:billArr.amount}}</p> -->
			<p v-if="billArr.cleaning_status==3 || billArr.cleaning_status== 2 " :class="billArr.cleaning_status==3 || billArr.cleaning_status== 2  ?'Paid':'money'">￥{{billArr.amount}}</p>
			<p v-if="billArr.cleaning_status==0 || billArr.cleaning_status== 1" :class="billArr.cleaning_status==0 || billArr.cleaning_status== 1  ?'money':'Paid'">￥{{billArr.receivable_fee}}</p>
		</div>
		<div class="dorm_box">
			<div class="dorm_box_head">
				<p class="ThreeTitle">账单信息</p>
			</div>
			<div class="dorm_info">
				<div class="dorm_info_item">
					<p>
						<span class="Level ">缴费状态：</span>
						<span class="text">{{billArr.cleaning_status>1?"已支付":"未支付"}}</span>
					</p>
					<p>
						<span class="Level ">应付总额：</span>
						<span class="text">{{billArr.amount}}元</span>
					</p>
					<p>
						<span class="Level ">已收金额：</span>
						<span class="text">{{billArr.received_amount}}元</span>
					</p>
					<p v-if="billArr.cleaning_status == 3 || billArr.cleaning_status == 2">
						<span class="Level ">付款时间：</span>
						<span class="text">{{billArr.clearing_time}}</span>
					</p>
				<!--  -->
					<!-- <p>
						<span class="Level ">账单编号：</span>
						<span class="text">{{billArr.sn}}</span>
					</p> -->
					
					<!-- <p>
						<span class="Level ">计费期间：</span>
						<span class="text">{{billArr.start_date}} 至 {{billArr.end_date}}</span>
					</p> -->
					<p>
						<span class="Level ">应收日期：</span>
						<span class="text">{{billArr.collection_date}}</span>
					</p>
					<p>
						<span class="Level ">收款对象：</span>
						<span class="text" v-if="billArr.contract">{{billArr.contract.customer_name}}</span>
					</p>
					<p>
						<span class="Level ">租赁位置：</span>
						<span class="text"  v-if="billArr.contract">{{billArr.contract.room}}</span>
					</p>
				</div>
			</div>
		</div>
		
		<div class="dorm_box cost">
			<div class="dorm_box_head">
				<p class="ThreeTitle">费用详情</p>
			</div>
			<div class="dorm_info">
				<div class="dorm_info_item">
					<p>
						<span class="Level ">{{billArr.contract.clauseBond[0].bondType.name}}：</span>
						<span class="text">{{billArr.contract.clauseBond[0].price}}元</span>
					</p>
					<!-- <p>
						<span class="Level ">水电保证金：</span>
						<span class="text">{{billArr.other_amount}}元</span>
					</p> -->
				</div>
			</div>
			
		</div>
		
		<div class="dorm_box cost" v-if="billArr.cleaning_status  == 3">
			<div class="dorm_box_head">
				<p class="ThreeTitle">结算详情</p>
			</div>
			<div class="dorm_info">
				<div class="dorm_info_item">
					<p>
						<span class="Level ">已退金额：</span>
						<span class="text">{{billArr.refund_amount}}元</span>
					</p>
					<p>
						<span class="Level ">已抵金额：</span>
						<span class="text">{{billArr.deduction_amount}}元</span>
					</p>
				</div>
			</div>
			
		</div>
		
		<div class="bill_footer">
			<!-- <p class="tisp" v-if="billArr.cleaning_status <= 1">提示：请于{{billArr.receivable_date}}之前缴清费用，以免产生滞纳金</p> -->
			<div class="btn" v-if="billArr.cleaning_status == 0 || billArr.cleaning_status == 1 ">
				<p class="generation" @click="clickBehalf">找人代付</p>
				<!-- <p class="pay" @click="pay">立即支付</p> -->
			</div>
			<van-button block v-else @click="goBack" color="#999">返回</van-button>
		</div>
		
		<div class="bg" v-if="isShow" @click="clickShow">
			<div class="share"></div>
		</div>
	</div>
</template>

<script>	
import {NavBar,Button} from "vant"
import { setShare } from "@/wechat";
import {wechatBillRead,wechatPay} from "@/api/index"
import { PAGE_BASE_URL } from "@/config";
import wx from "weixin-js-sdk";
export default{
	components:{
		[NavBar.name]:NavBar,
		[Button.name]:Button,
		
	},
	data(){
		return{
			isShow:false,
			billArr:[],
			id:null,
			type:null,
		}
	},
	async mounted() {
		this.id = this.$route.query.id
		this.type = this.$route.query.type
		this.getBill()
		const desc = `有一笔账单需要你帮我付款~`;
		const link = PAGE_BASE_URL + "/?#/bill?id=" + this.id + "&type=bill";
		setTimeout(() => {
		  setShare({
		    desc,
		    link
		  });
		}, 1000);
	},
	methods:{
		async getBill(){
			this.billArr = await wechatBillRead({
				id:this.id,
				type:this.type,
			})
		
		},
		goBack(){
			if (window.history.length <= 3 || window.history == "") {
			  this.$router.replace("/")
			}else{
			  this.$router.back();
			}
		},
		clickBehalf(){
			if(this.billArr.cleaning_status<2){
				this.isShow = true;
				document.body.style.overflow = "hidden"
			}
			
		},
		clickShow(){
			this.isShow = false;
			document.body.style.overflow = "auto"
		},
		async pay(){
			if(this.billArr.cleaning_status<2){
				const ua = navigator.userAgent.toLowerCase();
				if(ua.match(/MicroMessenger/i)=="micromessenger"){
					try{
						let than = this
						const wxData = await wechatPay({
							id:this.id,
							type:this.type,
						});
						WeixinJSBridge.invoke(
						   'getBrandWCPayRequest',{
							  "appId": wxData.appId,     
							  "timeStamp": wxData.timeStamp,         
							  "nonceStr": wxData.nonceStr,      
							  "package": wxData.package,     
							  "signType":wxData.signType,        
							  "paySign":wxData.paySign,
							  "payOrderId":wxData.payOrderId
						   },
						   function(res){
						   if(res.err_msg == "get_brand_wcpay_request:ok" ){
							   than.$dialog.alert({
								   title:"温馨提示",
									message:"支付成功"
								}).then(()=>{
									than.getBill()
								})
						   }else if(res.err_msg=="get_brand_wcpay_request:cancel"){
							   than.getBill()
						   }else{
							   than.$dialog.alert({
								   title:"温馨提示",
									message:"支付失败"
								}).then(()=>{
									than.getBill()
								})
						   } 
						}); 
					} catch (e) {
						this.$dialog.alert({
						  title: "错误提示",
						  message: e.message,
						});
					}
				
				}else{
					this.$dialog.alert({
						title:"温馨提示",
						message:"请用手机进入平台支付",
					})
				}
			}
		}
	}
}	
</script>

<style scoped lang="less">
.bg{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index:1;
	background-color:rgba(0,0,0,0.6);
}
.share{
	position: fixed;
	top: 0;
	left: 0;
	z-index:2;
	width: 100%;
	height: 100%;
	background: url(../../public/img/share.png) no-repeat;
	background-size: contain;
	background-origin:content-box;
	background-position-y: 20px;
	    background-position-x: 12px;
}	
.van-button{
	border-radius:10px;
	width: 93%;
	margin:0 auto;
}	
.dorm{
	// padding-bottom:30px;
	margin-top:42px;
}	
.dorm_box{
	width:100%;
	// height:293px;
	background:rgba(255,255,255,1);
	box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
	// border-radius:10px;
	margin:10px auto 0;
	padding-bottom:10px;
	.dorm_box_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 15px;
		.ThreeTitle{
			font-weight: bold;
			padding:16px 0;
		}
	}
	.dorm_info{
		border-top:1px solid #F1F1F1;
		.dorm_info_item{
			margin:18px auto;
			padding:0px 13px;
			p{
				margin:15px auto;
			}
		}
	}
}	
.money{
	font-size:25px;
	font-weight:400;
	color:rgba(232,23,23,1);
}
.Paid{
	font-size:25px;
	font-weight:400;
	color:#999;
}
.bill_title{
	// margin:42px auto 0;
	text-align: center;
	background-color: #fff;
	padding:20px 0;
	.ThreeTitle{
		font-size:13px;
		font-weight:bold;
		color:rgba(56,66,75,1);
	}
	.money{
		margin-top:10px;
	}
	.Paid{
		margin-top:10px;
	}
}
.cost .text{
	float: right;
}
.Price .Price_frist,.reading .Price_frist{
	font-size:12px;
	font-weight:400;
	color:rgba(153,153,153,1);
}
.Price .text,.reading .text{
	font-size:12px;
	font-weight:400;
	color:rgba(153,153,153,1);
}
.df{
	margin-bottom:5px !important;
}
.bill_footer{
	background-color:#fff;
	margin:10px auto;
	padding-bottom:20px;
	padding-top: 15px;
	.tisp{
		margin:0 15px;
		font-size:13px;
		font-weight:400;
		color:rgba(153,153,153,1);
		padding:16px 0;
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content:space-between;
		margin:0 15px;
		.generation{
			width:134px;
			height:41px;
			line-height: 41px;
			background:rgba(137,163,200,1);
			border-radius:10px;
			text-align: center;
			color: #fff;
			font-size:15px;
		}
		.pay{
			width:203px;
			height:41px;
			line-height: 41px;
			background:rgba(19,117,255,1);
			border-radius:10px;
			text-align: center;
			color: #fff;
			font-size:15px;
		}
	}
}
@media (min-width:750px) {
	.bg{
		width: 100%;
		height: 150%;
		position: fixed;
		top: 0;
		left: 0;
		z-index:1;
		background-color:rgba(0,0,0,0.6);
	}
	.share{
		position: fixed;
		top: 0;
		left: 0;
		z-index:2;
		width: 100%;
		height: 100%;
		background: url(../../public/img/share.png) no-repeat;
		background-size: contain;
		background-origin:content-box;
		background-position-y: 20px;
		    background-position-x: 12px;
	}	
	.van-button{
		border-radius:10px;
		width: 93%;
		margin:0 auto;
	}	
	.dorm{
		// padding-bottom:30px;
		margin-top:42px;
	}	
	.dorm_box{
		width:100%;
		// height:293px;
		background:rgba(255,255,255,1);
		box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
		// border-radius:10px;
		margin:10px auto 0;
		padding-bottom:10px;
		.dorm_box_head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 15px;
			.ThreeTitle{
				font-weight: bold;
				padding:16px 0;
			}
		}
		.dorm_info{
			border-top:1px solid #F1F1F1;
			.dorm_info_item{
				margin:18px auto;
				padding:0px 13px;
				p{
					margin:15px auto;
				}
			}
		}
	}	
	.money{
		font-size:25px;
		font-weight:400;
		color:rgba(232,23,23,1);
	}
	.bill_title{
		margin:46px auto 0;
		text-align: center;
		background-color: #fff;
		padding:20px 0;
		.ThreeTitle{
			font-size:13px;
			font-weight:bold;
			color:rgba(56,66,75,1);
		}
		.money{
			margin-top:10px;
		}
		.Paid{
			margin-top:10px;
		}
	}
	.cost .text{
		float: right;
	}
	.Price .Price_frist,.reading .Price_frist{
		font-size:12px;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
	.Price .text,.reading .text{
		font-size:12px;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
	.df{
		margin-bottom:5px !important;
	}
	.bill_footer{
		background-color:#fff;
		margin:10px auto;
		padding-bottom:20px;
		padding-top: 15px;
		.tisp{
			margin:0 15px;
			font-size:13px;
			font-weight:400;
			color:rgba(153,153,153,1);
			padding:16px 0;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content:space-between;
			margin:0 15px;
			.generation{
				width:134px;
				height:41px;
				line-height: 41px;
				background:rgba(137,163,200,1);
				border-radius:10px;
				text-align: center;
				color: #fff;
				font-size:15px;
			}
			.pay{
				width:203px;
				height:41px;
				line-height: 41px;
				background:rgba(19,117,255,1);
				border-radius:10px;
				text-align: center;
				color: #fff;
				font-size:15px;
			}
		}
	}
}
</style>
